<template>
  <el-container>
    <el-header>
      <el-steps style="width: 100%" :active="active" finish-status="success" align-center>
        <el-step title="输入链接" />
        <el-step title="数据处理" />
      </el-steps>
    </el-header>

    <el-main v-if="active == 0">
      <el-container>
        <el-header>
          <el-input v-model="pathContent" @input="pathContentChangeHandler" :autosize="false" :rows="8" class="input" resize="none" type="textarea"> </el-input>
        </el-header>
        <el-main>
          <!-- 展示表格 -->
          <el-card class="web-item" shadow="hover" v-for="item in paths" :key="item">
            <el-form :inline="true" style="height: 30px; font-size: 12px">
              <el-form-item style="width: 85%">{{ item }}</el-form-item>
              <el-form-item style="width: 10%; text-align: right"> <el-button type="text" @click="paths.splice(item, 1)">删除</el-button></el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-main>

    <el-main v-if="active == 1">
      <el-form label-width="180px">
        <el-form-item label="拆分规则">
          <el-radio-group v-model="form.trainingPattern">
            <el-radio label="0" size="large">文本拆分</el-radio>
            <el-radio label="1" size="large">AI文件拆分</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item label="AI文本拆分提示词" v-show="form.trainingPattern == '1'">
          <el-input v-model="form.qAPromptTemplate" :autosize="false" :rows="5" class="input" resize="none" type="textarea"> </el-input
        ></el-form-item>

        <el-form-item label="处理模式" v-show="form.trainingPattern == '0'">
          <el-radio-group v-model="form.mode">
            <el-radio label="0" size="large">自动</el-radio>
            <el-radio label="1" size="large">自定义</el-radio>
          </el-radio-group></el-form-item
        >

        <el-form-item label="段落最大Token" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerParagraph" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="每行最大Tokens" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.maxTokensPerLine" :min="1" size="small" controls-position="right" />
        </el-form-item>
        <el-form-item label="段落之间重叠标记的数目" v-show="form.mode == '1' && form.trainingPattern == '0'">
          <el-input-number v-model="form.overlappingTokens" :min="1" size="small" controls-position="right" />
        </el-form-item>
      </el-form>
      <el-main>
        <!-- 展示表格 -->
        <el-card class="web-item" shadow="hover" v-for="item in paths" :key="item">
          <el-form :inline="true" style="height: 30px; font-size: 12px">
            <el-form-item style="width: 100%">{{ item }}</el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-main>

    <div style="display: flex; justify-content: flex-end">
      <el-button v-show="active > 0" style="margin-top: 12px; max-width: 100px" @click="pre">上一步</el-button>
      <el-button v-show="active < 1" style="margin-top: 12px; max-width: 100px" :disabled="paths.length <= 0" @click="next">下一步</el-button>
      <el-button v-show="active == 1" style="margin-top: 12px; max-width: 100px" @click="submit">提交数据</el-button>
    </div>
  </el-container>
</template>

	  <script>
import scCron from '@/components/scCron';
// import { it } from 'element-plus/es/locale';

export default {
  name: 'AIKnowledgenDetailUploadManage',
  components: {
    scCron,
  },
  props: {
    wikiId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      pathContent: '', // 中间要进行换行符的拆分
      paths: [], // 拆分后的文件
      active: 0,
      isSaveing: false,
      currentId: '',

      form: {
        trainingPattern: '0',
        wikiId: '',
        fileName: '',
        path: '',
        fileId: '',
        type: 'web',
        mode: '0',
        qAPromptTemplate: `我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`,
        maxTokensPerParagraph: 1000,
        maxTokensPerLine: 300,
        overlappingTokens: 100,
      },
    };
  },
  async mounted() {
    this.$nextTick(() => {
      this.form.wikiId = this.wikiId;
    });
  },
  methods: {
    /**
     * 拆分路径
     */
    pathContentChangeHandler() {
      let tmpPaths = Array.from(this.pathContent.split('\n'));
      tmpPaths = tmpPaths
        .filter((item, index) => item.length > 0 && tmpPaths.indexOf(item) === index)
        .map(item => {
          if (item.startsWith('http://') || item.startsWith('https://')) {
            return item;
          }
          return 'http://' + item;
        });

      this.paths = tmpPaths;
    },

    setWiki(id) {
      this.$nextTick(() => {
        this.form.wikiId = id;

        this.form.fileName = '';
        this.form.fileId = '';
        this.form.path = '';
        this.active = 0;
        this.type = 'web';
        this.form.trainingPattern = '0';
        this.form.mode = '0';
        this.form.qAPromptTemplate = `
		我会给你一段文本，学习它们，并整理学习成果，要求为：
        1. 提出最多 20 个问题。
        2. 给出每个问题的答案。
        3. 答案要详细完整，答案可以包含普通文字、链接、代码、表格、公示、媒体链接等 markdown 元素。
        4. 按格式返回多个问题和答案:

        Q1: 问题。
        A1: 答案。
        Q2:
        A2:
        ……

        我的文本："""{{$input}}"""`;
        this.form.maxTokensPerParagraph = 1000;
        this.form.maxTokensPerLine = 300;
        this.form.overlappingTokens = 100;
        this.pathContent = '';
        this.paths = [];
      });
    },
    pre() {
      this.active = this.active - 1;
    },
    next() {
      this.active = this.active + 1;
    },
    //表单提交方法
    async submit() {
      // 判断是否有多个路径，如果有则上传多次
      for (let i = 0; i < this.paths.length; i++) {
        this.form.path = this.paths[i];
        this.form.fileName = this.paths[i];
        var res = await this.$API.aiWiki.knowledgeCreate.post(this.form);
        this.isSaveing = false;
        if (res.code == 200) {
          this.$emit('success');
          this.$message.success('操作成功');
        } else {
          this.$alert(res.message, '提示', { type: 'error' });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.web-item {
  margin: 5px 0;
}
:deep(.web-item .el-card__body) {
  padding: 5px 10px !important;
}
</style>
